<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>约会列表 - 心动社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 基础样式 */
        body {
            font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            padding: 0.8rem 0;
        }
        
        .logo {
            font-weight: 700;
            font-size: 1.5rem;
            color: #ff4d6d;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-link {
            color: #555;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: #ff4d6d;
        }
        
        /* 页面标题区域 */
        .page-header {
            margin-bottom: 1.5rem;
        }
        
        .page-title {
            font-weight: 800;
            font-size: 1.8rem;
            margin-bottom: 0.5rem;
            color: #2d3748;
        }
        
        .page-subtitle {
            color: #718096;
            max-width: 600px;
        }
        
        /* 筛选区域样式 */
        .filters-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            padding: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .filter-section {
            margin-bottom: 1.5rem;
        }
        
        .filter-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: #1f2937;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        /* 筛选标签样式 */
        .filter-tag {
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s;
            background-color: #f3f4f6;
            color: #6b7280;
            white-space: nowrap;
            border: 1px solid transparent;
        }
        
        .filter-tag:hover {
            background-color: #e5e7eb;
        }
        
        .filter-tag.active {
            background-color: #ff4d6d;
            color: white;
        }
        
        /* 滑块样式 */
        .range-slider {
            width: 100%;
            margin: 1rem 0;
        }
        
        .range-labels {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            color: #6b7280;
        }
        
        /* 按钮样式 */
        .filter-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 1rem;
        }
        
        .btn-reset {
            background-color: #f3f4f6;
            color: #6b7280;
            border: none;
        }
        
        .btn-reset:hover {
            background-color: #e5e7eb;
            color: #4b5563;
        }
        
        .btn-apply {
            background-color: #ff4d6d;
            color: white;
            border: none;
        }
        
        .btn-apply:hover {
            background-color: #f04262;
            color: white;
        }
        
        /* 视图切换 */
        .view-options {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1.5rem;
            gap: 0.5rem;
        }
        
        .view-btn {
            background-color: white;
            border: 1px solid #e2e8f0;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            color: #6b7280;
            transition: all 0.2s;
        }
        
        .view-btn:hover, .view-btn.active {
            background-color: #f9fafb;
            color: #ff4d6d;
            border-color: #ffccd5;
        }
        
        /* 列表视图样式 */
        .dating-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .list-item {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
        }
        
        .list-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(0,0,0,0.08);
        }
        
        .list-item-img {
            width: 180px;
            flex-shrink: 0;
            position: relative;
        }
        
        .list-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .list-item-content {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 网格视图样式 */
        .dating-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .grid-item {
            background-color: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }
        
        .grid-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.08);
        }
        
        .grid-item-img {
            height: 180px;
            position: relative;
            overflow: hidden;
        }
        
        .grid-item-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .grid-item:hover .grid-item-img img {
            transform: scale(1.05);
        }
        
        .grid-item-content {
            padding: 1.25rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        /* 卡片内容通用样式 */
        .category-label {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 15px;
            font-size: 0.75rem;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .item-title {
            font-weight: 600;
            font-size: 1.15rem;
            margin-bottom: 0.5rem;
            color: #1f2937;
            transition: color 0.3s;
        }
        
        .list-item:hover .item-title,
        .grid-item:hover .item-title {
            color: #ff4d6d;
        }
        
        .item-desc {
            color: #6b7280;
            font-size: 0.9rem;
            margin-bottom: 1rem;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .grid-item .item-desc {
            -webkit-line-clamp: 3;
            margin-bottom: auto;
        }
        
        /* 作者信息 */
        .author-info {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .author-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 10px;
            border: 2px solid #f3f4f6;
        }
        
        .author-details {
            flex: 1;
        }
        
        .author-name {
            font-weight: 500;
            font-size: 0.9rem;
            margin: 0 0 2px 0;
            color: #374151;
        }
        
        .meta-info {
            font-size: 0.8rem;
            color: #9ca3af;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 统计和操作区 */
        .item-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.85rem;
        }
        
        .stats {
            display: flex;
            gap: 1.25rem;
            color: #6b7280;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .actions {
            display: flex;
            gap: 1rem;
        }
        
        .action-btn {
            background: none;
            border: none;
            color: #6b7280;
            cursor: pointer;
            transition: color 0.2s;
            padding: 3px;
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.85rem;
        }
        
        .action-btn:hover {
            color: #ff4d6d;
        }
        
        .action-btn.liked {
            color: #ff4d6d;
        }
        
        .action-btn.saved {
            color: #f59e0b;
        }
        
        /* 标签和徽章 */
        .date-badge {
            position: absolute;
            top: 12px;
            left: 12px;
            background-color: #ff4d6d;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            z-index: 10;
        }
        
        .distance-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            background-color: rgba(255, 255, 255, 0.9);
            color: #374151;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            z-index: 10;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        /* 分类颜色 */
        .cat-food { background-color: #fff3cd; color: #856404; }
        .cat-movie { background-color: #d1ecf1; color: #0c5460; }
        .cat-sport { background-color: #d4edda; color: #155724; }
        .cat-art { background-color: #f8d7da; color: #721c24; }
        .cat-travel { background-color: #e0cffc; color: #5a2ca0; }
        .cat-music { background-color: #ffe8cc; color: #c05700; }
        .cat-study { background-color: #ccfbf1; color: #065f46; }
        
        /* 分页样式 */
        .pagination-container {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
        
        .pagination {
            gap: 0.5rem;
        }
        
        .page-item .page-link {
            color: #6b7280;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            padding: 0.5rem 1rem;
        }
        
        .page-item.active .page-link {
            background-color: #ff4d6d;
            border-color: #ff4d6d;
            color: white;
        }
        
        .page-item .page-link:hover {
            color: #ff4d6d;
            border-color: #ffccd5;
            background-color: #f9fafb;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .list-item {
                flex-direction: column;
            }
            
            .list-item-img {
                width: 100%;
                height: 200px;
            }
            
            .filter-actions {
                flex-direction: column;
            }
            
            .filter-actions .btn {
                width: 100%;
            }
            
            .stats {
                flex-wrap: wrap;
                gap: 0.75rem 1rem;
            }
            
            .item-actions {
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            
            .actions {
                width: 100%;
                justify-content: flex-end;
            }
        }
        
        @media (max-width: 576px) {
            .navbar-nav {
                gap: 0.5rem !important;
            }
            
            .filter-tag {
                padding: 0.3rem 0.8rem;
                font-size: 0.8rem;
            }
            
            .page-title {
                font-size: 1.5rem;
            }
        }
        
        /* 动画效果 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        
        /* 结果计数 */
        .results-count {
            color: #6b7280;
            margin-bottom: 1rem;
            font-size: 0.9rem;
        }
        
        /* 活跃筛选标签 */
        .active-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            padding: 1rem;
            background-color: #fff5f7;
            border-radius: 8px;
        }
        
        .active-filter {
            display: flex;
            align-items: center;
            gap: 6px;
            background-color: white;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.85rem;
            color: #6b7280;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        .remove-filter {
            color: #d1d5db;
            cursor: pointer;
            transition: color 0.2s;
        }
        
        .remove-filter:hover {
            color: #ff4d6d;
        }
        
        /* 空状态 */
        .empty-state {
            text-align: center;
            padding: 4rem 2rem;
            background-color: white;
            border-radius: 12px;
            margin-bottom: 2rem;
        }
        
        .empty-state i {
            font-size: 4rem;
            color: #ffccd5;
            margin-bottom: 1rem;
        }
        
        .empty-state h3 {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
            color: #1f2937;
        }
        
        .empty-state p {
            color: #6b7280;
            max-width: 500px;
            margin: 0 auto 1.5rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a href="#" class="logo">
                <i class="fas fa-heart"></i>
                <span>心动社交</span>
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
                <i class="fas fa-bars"></i>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarContent">
                <ul class="navbar-nav ms-auto gap-4">
                    <li class="nav-item">
                        <a href="#" class="nav-link">首页</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link active">约会列表</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">附近的人</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">消息</a>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="btn btn-danger">
                            <i class="fas fa-plus me-1"></i> 发起约会
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <!-- 主内容区 -->
    <div class="container py-5">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">探索约会活动</h1>
            <p class="page-subtitle">根据你的喜好筛选，找到最适合你的约会活动</p>
        </div>
        
        <!-- 筛选区域 -->
        <div class="filters-container">
            <!-- 筛选器折叠面板 -->
            <div class="accordion" id="filtersAccordion">
                <!-- 类别筛选 -->
                <div class="accordion-item border-0">
                    <h2 class="accordion-header" id="categoryHeader">
                        <button class="accordion-button filter-title collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#categoryCollapse">
                            <i class="fas fa-tags"></i> 活动类别
                        </button>
                    </h2>
                    <div id="categoryCollapse" class="accordion-collapse collapse show" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body p-0">
                            <div class="filter-options">
                                <div class="filter-tag active">全部类别</div>
                                <div class="filter-tag">美食餐饮 <span class="badge bg-light text-dark ms-1">128</span></div>
                                <div class="filter-tag">电影观影 <span class="badge bg-light text-dark ms-1">86</span></div>
                                <div class="filter-tag">户外运动 <span class="badge bg-light text-dark ms-1">94</span></div>
                                <div class="filter-tag">艺术展览 <span class="badge bg-light text-dark ms-1">52</span></div>
                                <div class="filter-tag">旅行出游 <span class="badge bg-light text-dark ms-1">67</span></div>
                                <div class="filter-tag">音乐演出 <span class="badge bg-light text-dark ms-1">48</span></div>
                                <div class="filter-tag">学习交流 <span class="badge bg-light text-dark ms-1">35</span></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 日期筛选 -->
                <div class="accordion-item border-0">
                    <h2 class="accordion-header" id="dateHeader">
                        <button class="accordion-button filter-title collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#dateCollapse">
                            <i class="fas fa-calendar"></i> 活动日期
                        </button>
                    </h2>
                    <div id="dateCollapse" class="accordion-collapse collapse" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body p-0">
                            <div class="filter-options">
                                <div class="filter-tag active">全部日期</div>
                                <div class="filter-tag">今天</div>
                                <div class="filter-tag">明天</div>
                                <div class="filter-tag">本周末</div>
                                <div class="filter-tag">下周</div>
                                <div class="filter-tag">本月内</div>
                                <div class="filter-tag">自定义 <i class="fas fa-chevron-right ms-1"></i></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 距离筛选 -->
                <div class="accordion-item border-0">
                    <h2 class="accordion-header" id="distanceHeader">
                        <button class="accordion-button filter-title collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#distanceCollapse">
                            <i class="fas fa-map-marker-alt"></i> 距离范围
                        </button>
                    </h2>
                    <div id="distanceCollapse" class="accordion-collapse collapse" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body p-0">
                            <div class="px-3">
                                <input type="range" min="1" max="50" value="10" class="range-slider form-range" id="distanceSlider">
                                <div class="range-labels">
                                    <span>1公里</span>
                                    <span id="distanceValue">10公里</span>
                                    <span>50公里</span>
                                </div>
                            </div>
                            <div class="filter-options mt-3 px-3">
                                <div class="filter-tag">1公里内</div>
                                <div class="filter-tag active">5-10公里</div>
                                <div class="filter-tag">20公里内</div>
                                <div class="filter-tag">50公里内</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 价格筛选 -->
                <div class="accordion-item border-0">
                    <h2 class="accordion-header" id="priceHeader">
                        <button class="accordion-button filter-title collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#priceCollapse">
                            <i class="fas fa-money-bill"></i> 价格范围
                        </button>
                    </h2>
                    <div id="priceCollapse" class="accordion-collapse collapse" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body p-0">
                            <div class="px-3">
                                <input type="range" min="0" max="500" value="100" class="range-slider form-range" id="priceSlider">
                                <div class="range-labels">
                                    <span>免费</span>
                                    <span id="priceValue">¥100以内</span>
                                    <span>¥500+</span>
                                </div>
                            </div>
                            <div class="filter-options mt-3 px-3">
                                <div class="filter-tag">免费</div>
                                <div class="filter-tag active">¥100以内</div>
                                <div class="filter-tag">¥100-300</div>
                                <div class="filter-tag">¥300-500</div>
                                <div class="filter-tag">¥500以上</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 其他筛选 -->
                <div class="accordion-item border-0">
                    <h2 class="accordion-header" id="otherHeader">
                        <button class="accordion-button filter-title collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#otherCollapse">
                            <i class="fas fa-sliders-h"></i> 其他筛选
                        </button>
                    </h2>
                    <div id="otherCollapse" class="accordion-collapse collapse" data-bs-parent="#filtersAccordion">
                        <div class="accordion-body p-0">
                            <div class="filter-options px-3">
                                <div class="filter-tag">仅看有图片</div>
                                <div class="filter-tag active">可免费参加</div>
                                <div class="filter-tag">热门活动</div>
                                <div class="filter-tag">新发布</div>
                                <div class="filter-tag">人数较少</div>
                            </div>
                            
                            <div class="px-3 py-3">
                                <h5 class="filter-title fs-6">排序方式</h5>
                                <div class="filter-options">
                                    <div class="filter-tag active">推荐优先</div>
                                    <div class="filter-tag">距离最近</div>
                                    <div class="filter-tag">最新发布</div>
                                    <div class="filter-tag">人气最高</div>
                                    <div class="filter-tag">即将开始</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 筛选操作按钮 -->
            <div class="filter-actions">
                <button class="btn btn-reset">
                    <i class="fas fa-sync-alt me-1"></i> 重置筛选
                </button>
                <button class="btn btn-apply">
                    <i class="fas fa-filter me-1"></i> 应用筛选
                </button>
            </div>
        </div>
        
        <!-- 活跃筛选标签 -->
        <div class="active-filters">
            <div class="active-filter">
                <span>可免费参加</span>
                <i class="fas fa-times remove-filter"></i>
            </div>
            <div class="active-filter">
                <span>5-10公里</span>
                <i class="fas fa-times remove-filter"></i>
            </div>
            <div class="active-filter">
                <span>¥100以内</span>
                <i class="fas fa-times remove-filter"></i>
            </div>
            <div class="active-filter">
                <span>推荐优先</span>
                <i class="fas fa-times remove-filter"></i>
            </div>
        </div>
        
        <!-- 视图切换和结果计数 -->
        <div class="d-flex justify-content-between align-items-center">
            <div class="results-count">找到 <strong>156</strong> 个符合条件的约会活动</div>
            <div class="view-options">
                <button class="view-btn active" id="listViewBtn" title="列表视图">
                    <i class="fas fa-list"></i> 列表
                </button>
                <button class="view-btn" id="gridViewBtn" title="网格视图">
                    <i class="fas fa-th"></i> 网格
                </button>
            </div>
        </div>
        
        <!-- 约会列表 - 列表视图 -->
        <div class="dating-list" id="listView">
            <!-- 列表项1 -->
            <div class="list-item fade-in">
                <div class="list-item-img">
                    <img src="https://picsum.photos/600/400?random=10" alt="爵士音乐会现场">
                    <div class="date-badge">周五晚</div>
                    <div class="distance-badge">2.5km</div>
                </div>
                
                <div class="list-item-content">
                    <span class="category-label cat-music">音乐演出</span>
                    <h3 class="item-title">爵士音乐会，沉醉于蓝调之夜</h3>
                    
                    <p class="item-desc">
                        downtown爵士俱乐部的周末演出，有著名钢琴家和萨克斯手表演，寻找同样喜欢爵士乐的朋友。现场提供饮品，气氛轻松愉快。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=102" alt="李明的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">李明</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>蓝调爵士俱乐部</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-clock fa-sm"></i>
                                    <span>20:00-22:30</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-ticket-alt fa-sm"></i>
                                    <span>免费入场</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>2.5k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>78</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>42</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>189</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                                <span>参加</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 列表项2 -->
            <div class="list-item fade-in">
                <div class="list-item-img">
                    <div style="width: 100%; height: 100%; background-color: #f9fafb; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9ca3af; text-align: center; padding: 1rem;">
                        <i class="fas fa-gamepad" style="font-size: 3rem; margin-bottom: 0.5rem; color: #ffccd5;"></i>
                        <div>桌游聚会</div>
                    </div>
                    <div class="date-badge">周日下午</div>
                    <div class="distance-badge">5.8km</div>
                </div>
                
                <div class="list-item-content">
                    <span class="category-label cat-study">休闲社交</span>
                    <h3 class="item-title">桌游爱好者聚会，策略与欢乐并存</h3>
                    
                    <p class="item-desc">
                        桌游吧聚会，有多种策略类和欢乐类桌游可选，新手也不用担心，会有人教学。提供免费茶水，人均消费约30元。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=103" alt="王佳的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">王佳</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>脑力桌游吧</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-clock fa-sm"></i>
                                    <span>14:00-18:00</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-ticket-alt fa-sm"></i>
                                    <span>约¥30/人</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.7k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>54</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>18</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>124</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                                <span>参加</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 列表项3 -->
            <div class="list-item fade-in">
                <div class="list-item-img">
                    <img src="https://picsum.photos/600/400?random=40" alt="城市夜跑路线">
                    <div class="date-badge">每晚7点</div>
                    <div class="distance-badge">0.8km</div>
                </div>
                
                <div class="list-item-content">
                    <span class="category-label cat-sport">户外运动</span>
                    <h3 class="item-title">城市夜跑小分队，健康社交两不误</h3>
                    
                    <p class="item-desc">
                        每天晚上在滨河公园组织轻松夜跑，5公里休闲路线，适合各种水平，跑完可一起拉伸聊天。无需费用，自带饮用水即可。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=106" alt="周跑的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">周跑</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>滨河公园</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-clock fa-sm"></i>
                                    <span>19:00-20:00</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-ticket-alt fa-sm"></i>
                                    <span>完全免费</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.3k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>45</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>23</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>98</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                                <span>参加</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 列表项4 -->
            <div class="list-item fade-in">
                <div class="list-item-img">
                    <img src="https://picsum.photos/600/400?random=70" alt="电影放映会">
                    <div class="date-badge">周六晚</div>
                    <div class="distance-badge">7.2km</div>
                </div>
                
                <div class="list-item-content">
                    <span class="category-label cat-movie">电影欣赏</span>
                    <h3 class="item-title">经典老电影放映会，《罗马假日》重温</h3>
                    
                    <p class="item-desc">
                        社区影院的经典电影系列，这次放映《罗马假日》，提供免费爆米花和饮料。无需预约，提前到场即可。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=110" alt="钱影的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">钱影</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>社区文化中心</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-clock fa-sm"></i>
                                    <span>19:30-21:30</span>
                                </div>
                                <div class="meta-item">
                                    <i class="fas fa-ticket-alt fa-sm"></i>
                                    <span>免费入场</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>543</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-comment"></i>
                                <span>23</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>56</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                                <span>36</span>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                            <button class="action-btn">
                                <i class="fas fa-check-circle"></i>
                                <span>参加</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 约会列表 - 网格视图 (默认隐藏) -->
        <div class="dating-grid" id="gridView" style="display: none;">
            <!-- 网格项1 -->
            <div class="grid-item fade-in">
                <div class="grid-item-img">
                    <img src="https://picsum.photos/600/400?random=10" alt="爵士音乐会现场">
                    <div class="date-badge">周五晚</div>
                    <div class="distance-badge">2.5km</div>
                </div>
                
                <div class="grid-item-content">
                    <span class="category-label cat-music">音乐演出</span>
                    <h3 class="item-title">爵士音乐会，沉醉于蓝调之夜</h3>
                    
                    <p class="item-desc">
                        downtown爵士俱乐部的周末演出，有著名钢琴家和萨克斯手表演，寻找同样喜欢爵士乐的朋友。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=102" alt="李明的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">李明</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>蓝调爵士俱乐部</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>2.5k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>42</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格项2 -->
            <div class="grid-item fade-in">
                <div class="grid-item-img">
                    <div style="width: 100%; height: 100%; background-color: #f9fafb; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #9ca3af; text-align: center; padding: 1rem;">
                        <i class="fas fa-gamepad" style="font-size: 3rem; margin-bottom: 0.5rem; color: #ffccd5;"></i>
                        <div>桌游聚会</div>
                    </div>
                    <div class="date-badge">周日下午</div>
                    <div class="distance-badge">5.8km</div>
                </div>
                
                <div class="grid-item-content">
                    <span class="category-label cat-study">休闲社交</span>
                    <h3 class="item-title">桌游爱好者聚会，策略与欢乐并存</h3>
                    
                    <p class="item-desc">
                        桌游吧聚会，有多种策略类和欢乐类桌游可选，新手也不用担心，会有人教学。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=103" alt="王佳的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">王佳</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>脑力桌游吧</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.7k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>18</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格项3 -->
            <div class="grid-item fade-in">
                <div class="grid-item-img">
                    <img src="https://picsum.photos/600/400?random=40" alt="城市夜跑路线">
                    <div class="date-badge">每晚7点</div>
                    <div class="distance-badge">0.8km</div>
                </div>
                
                <div class="grid-item-content">
                    <span class="category-label cat-sport">户外运动</span>
                    <h3 class="item-title">城市夜跑小分队，健康社交两不误</h3>
                    
                    <p class="item-desc">
                        每天晚上在滨河公园组织轻松夜跑，5公里休闲路线，适合各种水平，跑完可一起拉伸聊天。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=106" alt="周跑的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">周跑</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>滨河公园</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>1.3k</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>23</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 网格项4 -->
            <div class="grid-item fade-in">
                <div class="grid-item-img">
                    <img src="https://picsum.photos/600/400?random=70" alt="电影放映会">
                    <div class="date-badge">周六晚</div>
                    <div class="distance-badge">7.2km</div>
                </div>
                
                <div class="grid-item-content">
                    <span class="category-label cat-movie">电影欣赏</span>
                    <h3 class="item-title">经典老电影放映会，《罗马假日》重温</h3>
                    
                    <p class="item-desc">
                        社区影院的经典电影系列，这次放映《罗马假日》，提供免费爆米花和饮料。
                    </p>
                    
                    <div class="author-info">
                        <img src="https://picsum.photos/200/200?random=110" alt="钱影的头像" class="author-avatar">
                        <div class="author-details">
                            <p class="author-name">钱影</p>
                            <div class="meta-info">
                                <div class="meta-item">
                                    <i class="fas fa-map-marker-alt fa-sm"></i>
                                    <span>社区文化中心</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="item-actions">
                        <div class="stats">
                            <div class="stat-item">
                                <i class="far fa-eye"></i>
                                <span>543</span>
                            </div>
                            <div class="stat-item">
                                <i class="far fa-user"></i>
                                <span>56</span>
                            </div>
                        </div>
                        <div class="actions">
                            <button class="action-btn">
                                <i class="far fa-heart"></i>
                            </button>
                            <button class="action-btn">
                                <i class="far fa-bookmark"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination-container">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">4</a></li>
                    <li class="page-item"><a class="page-link" href="#">5</a></li>
                    <li class="page-item">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
    
    <!-- 页脚 -->
    <footer class="bg-white py-5 border-top">
        <div class="container">
            <div class="row">
                <div class="col-md-6 mb-4">
                    <div class="logo mb-3">
                        <i class="fas fa-heart"></i>
                        <span>心动社交</span>
                    </div>
                    <p class="text-muted mb-0" style="max-width: 400px;">
                        连接有趣的灵魂，发现精彩的约会。在这里，每一次相遇都是美好的开始。
                    </p>
                </div>
                
                <div class="col-md-3 mb-4">
                    <h5 class="font-weight-medium mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2"><a href="#" class="text-muted">首页</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">约会推荐</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">附近活动</a></li>
                        <li class="mb-2"><a href="#" class="text-muted">帮助中心</a></li>
                    </ul>
                </div>
                
                <div class="col-md-3">
                    <h5 class="font-weight-medium mb-3">联系我们</h5>
                    <ul class="list-unstyled">
                        <li class="mb-2 text-muted"><i class="fas fa-envelope me-2"></i>contact@xindong.com</li>
                        <li class="mb-2 text-muted"><i class="fas fa-phone me-2"></i>400-123-4567</li>
                    </ul>
                    <div class="mt-3">
                        <a href="#" class="text-muted me-3"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-muted me-3"><i class="fab fa-wechat"></i></a>
                        <a href="#" class="text-muted"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5 pt-3 border-top">
                <p class="text-muted mb-0">&copy; 2023 心动社交 - 让每次约会都充满惊喜</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 滚动渐入动画
            const fadeElements = document.querySelectorAll('.fade-in');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry, index) => {
                    if (entry.isIntersecting) {
                        setTimeout(() => {
                            entry.target.style.opacity = '1';
                            entry.target.style.transform = 'translateY(0)';
                        }, index * 100);
                        observer.unobserve(entry.target);
                    }
                });
            }, { threshold: 0.1 });
            
            fadeElements.forEach(el => observer.observe(el));
            
            // 距离滑块交互
            const distanceSlider = document.getElementById('distanceSlider');
            const distanceValue = document.getElementById('distanceValue');
            
            distanceSlider.addEventListener('input', function() {
                distanceValue.textContent = `${this.value}公里`;
            });
            
            // 价格滑块交互
            const priceSlider = document.getElementById('priceSlider');
            const priceValue = document.getElementById('priceValue');
            
            priceSlider.addEventListener('input', function() {
                if (this.value == 0) {
                    priceValue.textContent = '免费';
                } else if (this.value == 500) {
                    priceValue.textContent = '¥500+';
                } else {
                    priceValue.textContent = `¥${this.value}以内`;
                }
            });
            
            // 筛选标签选择
            const filterTags = document.querySelectorAll('.filter-tag');
            filterTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 如果是"全部类别"或"全部日期"，取消同组其他选中状态
                    const parentCollapse = this.closest('.accordion-collapse');
                    if (this.textContent.includes('全部')) {
                        parentCollapse.querySelectorAll('.filter-tag').forEach(t => {
                            t.classList.remove('active');
                        });
                    } else {
                        // 取消同组"全部"选项的选中状态
                        parentCollapse.querySelectorAll('.filter-tag').forEach(t => {
                            if (t.textContent.includes('全部')) {
                                t.classList.remove('active');
                            }
                        });
                    }
                    
                    // 切换当前标签状态
                    this.classList.toggle('active');
                });
            });
            
            // 视图切换
            const listViewBtn = document.getElementById('listViewBtn');
            const gridViewBtn = document.getElementById('gridViewBtn');
            const listView = document.getElementById('listView');
            const gridView = document.getElementById('gridView');
            
            listViewBtn.addEventListener('click', function() {
                listView.style.display = 'flex';
                gridView.style.display = 'none';
                listViewBtn.classList.add('active');
                gridViewBtn.classList.remove('active');
            });
            
            gridViewBtn.addEventListener('click', function() {
                listView.style.display = 'none';
                gridView.style.display = 'grid';
                listViewBtn.classList.remove('active');
                gridViewBtn.classList.add('active');
            });
            
            // 移除活跃筛选标签
            const removeFilters = document.querySelectorAll('.remove-filter');
            removeFilters.forEach(btn => {
                btn.addEventListener('click', function() {
                    this.closest('.active-filter').remove();
                    
                    // 如果没有活跃筛选标签，隐藏整个容器
                    if (document.querySelectorAll('.active-filter').length === 0) {
                        document.querySelector('.active-filters').style.display = 'none';
                    }
                });
            });
            
            // 重置筛选按钮
            document.querySelector('.btn-reset').addEventListener('click', function() {
                // 重置所有筛选标签
                filterTags.forEach(tag => {
                    tag.classList.remove('active');
                    // 激活"全部"选项
                    if (tag.textContent.includes('全部')) {
                        tag.classList.add('active');
                    }
                });
                
                // 重置滑块
                distanceSlider.value = 10;
                distanceValue.textContent = '10公里';
                priceSlider.value = 100;
                priceValue.textContent = '¥100以内';
                
                // 清空活跃筛选标签
                document.querySelectorAll('.active-filter').forEach(tag => {
                    tag.remove();
                });
                
                // 隐藏活跃筛选容器
                document.querySelector('.active-filters').style.display = 'none';
            });
            
            // 应用筛选按钮
            document.querySelector('.btn-apply').addEventListener('click', function() {
                // 这里可以添加筛选逻辑
                alert('筛选已应用！');
            });
            
            // 点赞功能
            const likeButtons = document.querySelectorAll('.action-btn');
            likeButtons.forEach(btn => {
                if (btn.querySelector('.fa-heart')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const icon = this.querySelector('i');
                        const countSpan = this.querySelector('span');
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('liked');
                            if (countSpan) {
                                countSpan.textContent = (parseInt(countSpan.textContent) + 1).toString();
                            }
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('liked');
                            if (countSpan) {
                                countSpan.textContent = (parseInt(countSpan.textContent) - 1).toString();
                            }
                        }
                    });
                }
            });
            
            // 收藏功能
            const saveButtons = document.querySelectorAll('.action-btn');
            saveButtons.forEach(btn => {
                if (btn.querySelector('.fa-bookmark')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const icon = this.querySelector('i');
                        
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.classList.add('saved');
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.classList.remove('saved');
                        }
                    });
                }
            });
            
            // 参加功能
            const joinButtons = document.querySelectorAll('.action-btn');
            joinButtons.forEach(btn => {
                if (btn.querySelector('.fa-check-circle')) {
                    btn.addEventListener('click', function(e) {
                        e.stopPropagation();
                        const card = this.closest('.list-item, .grid-item');
                        const title = card.querySelector('.item-title').textContent;
                        
                        if (confirm(`确定要参加"${title}"吗？`)) {
                            this.innerHTML = '<i class="fas fa-check"></i> 已参加';
                            this.disabled = true;
                            this.style.color = '#28a745';
                            
                            // 更新参加人数
                            const userStat = card.querySelector('.stat-item:last-child span');
                            if (userStat) {
                                let count = parseInt(userStat.textContent);
                                userStat.textContent = (count + 1).toString();
                            }
                        }
                    });
                }
            });
            
            // 列表/网格项点击事件
            const listItems = document.querySelectorAll('.list-item, .grid-item');
            listItems.forEach(item => {
                item.addEventListener('click', function() {
                    const title = this.querySelector('.item-title').textContent;
                    alert(`查看"${title}"的详细信息`);
                    // 实际应用中可以跳转到详情页
                });
            });
        });
    </script>
</body>
</html>
    
